<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        ul li{
            color: tomato;
        }
        div>ul>li{
            color: wheat;
        }/* 必须是li */
        div>ul>li:first-child{
            color:slateblue;
        }
        div>ul>li:nth-child(2){
            color: aliceblue;
        }

        div>div{width:150px;
            height: 150px;
            float: left;
        }
        div>div:nth-child(1){background-color: royalblue; }
        div>div:nth-child(2){background-color: yellowgreen; }
        div>div:nth-child(3){background-color: papayawhip; }
        div>div:nth-child(4){background-color: aliceblue; }
        ul li{
            list-style-type: none;/* 消除li的小点*/
        }
        /*cur :pointer 鼠标移到上面变成小手*/
        /* */
        .di4{
            width: 500px;
            height: 70px;
            border: 2px solid blue;
        }
        .di4 ul li{
            float: left;
            margin-left: 20px;
            margin-top: 10px;
            width: 80px;
            height: 50px;

        }
        /*position: fixed; 类似电梯导航*/
        #di6{
            width: 200px;
            height: 200px;
            background-color:blue;
        }
    </style>
    <script>/* 文档就绪*/
    window.onload=function (){

        document.getElementById("di6").addEventListener("click",function(){

            this.style.width=400+'px';
            this.style.height=400+'px';
            document.getElementById("di6").addEventListener("mouseout",function(){
                this.style.width=200+'px';
                this.style.height=200+'px';
            })
        })

        document.getElementById("an1").addEventListener("click",function(){

            document.getElementById("di5-1").style.visibility="visible";
            document.getElementById("di5-2").style.visibility="hidden";

        })
        document.getElementById("an2").addEventListener("click",function (){

            document.getElementById("di5-2").style.visibility="visible";
            document.getElementById("di5-1").style.visibility="hidden";

        })
    }

    </script>
</head>
<body>

<div id="di6"></div>
<div class="di5">
    <div id="di5-1"></div>
    <div id="di5-2"> </div>
</div>
<form>
    <input type="button" value="图一" id="an1">
    <input type="button" value="图二" id="an2">
</form>
</div>
</body>
<html>